<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>props</title>
</head>

<body>
    <h1>props</h1>
    <hr />
    <div id="demoReact"></div>
</body>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">

    // function SubCom(props)
    let SubCom = (props) => {
        return (
            <div>
                我是子组件
                {
                    props.arr.map((v, i) => {
                        return <p>{v}</p>
                    })
                }
            </div>
        )
    }

    let dataArr = ["姜", "葱", "蒜"];

    let Com = () => {
        return (
            <div>
                <h1>我是父组件</h1>
                <SubCom arr={dataArr} />
            </div>
        )
    }

    ReactDOM.render(<Com />, document.getElementById("demoReact"));

</script>

</html>